import React, {Component} from 'react';
import {Route, Switch} from 'react-router-dom';
import Breadcrumb from 'Shell/components/Breadcrumb';
import NoMatchRoute from '../common/NoMatchRoute';
import routes from './routes';
import QueryPage from './QueryPage';
import DetailPage from './DetailPage';
import AddPage from './AddPage';
import {getCurrentUserPagePermissionsApi} from 'Shared/actions/currentUserContext';
import {PermissionsContext, InitDataContext} from './contexts';
import AbandonEnable from './AbandonEnable';
import QueryTableWrapper from './components/QueryTableWrapper';
import {getWarrantyPolicyItem, getBrands} from './api';
import moment from 'moment';

const getDefaultFormData = () => ({
    code: '',
    name: '',
    startTime: [],
    status: [],
    warrantyPolicyType: null,
});
const getData = condition => {
    const {startTime, ...otherCondition} = condition;
    if(startTime && startTime.length > 0) {
        otherCondition.beginStartTime = moment(startTime[0]).toISOString();
        otherCondition.endStartTime = moment(startTime[1]).toISOString();
    }
    return getWarrantyPolicyItem(otherCondition);
};
export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            permissions: [],
            brands: [],
        };
    }
    
    componentDidMount() {
        getCurrentUserPagePermissionsApi('dcs-afterSales-warrantyPolicy').then(res => {
            if(res.isOk)
                this.setState({
                    permissions: res.data
                });
        });
        getBrands().then(res => {
            if(res.ok) {
                const {content = []} = res.data;
                const brands = content.map(item => ({
                    value: item.id,
                    text: `(${item.code})${item.name}`
                }));
                this.setState({
                    brands
                });
            }
        });
    }

    renderRoutes = queryTableProps => (
        <Switch>
            <Route path={routes.query.url()} exact
                render={props =>
                    <QueryPage
                        {...queryTableProps}
                        history={props.history}
                        location={props.location} />}/>
            <Route path={routes.enable.url()} exact
                render={props => <AbandonEnable page={'enable'} history={props.history}/>}/>
            <Route path={routes.abandon.url()} exact
                render={props => <AbandonEnable page={'abandon'} history={props.history}/>}/>
            <Route path={routes.detail.url()} exact
                render={props =>
                    <DetailPage
                        id={props.match.params.id}
                        history={props.history}
                        queryPage={this.queryPage}/>}/>
            <Route path={routes.add.url()} exact
                render={props => <AddPage history={props.history}/>}/>
            <Route path={routes.update.url()} exact
                render={props => <AddPage id={props.match.params.id} history={props.history}/>}/>
            <NoMatchRoute link={routes.query.url()} />
        </Switch>
    )

    render() {
        return (
            <PermissionsContext.Provider value={this.state.permissions}>
                <InitDataContext.Provider value={this.state.brands}>
                    <Route render={props => <Breadcrumb location={props.location} />} />
                    <div className="page-main">
                        <QueryTableWrapper getData={getData} getDefaultFormData={getDefaultFormData}>
                            {this.renderRoutes}
                        </QueryTableWrapper>
                    </div>
                </InitDataContext.Provider>
            </PermissionsContext.Provider>
        );
    }
}
